import React, { useState } from 'react'
import './MydesignCenSJ.css'
import EchartsLeft from '../../Echarts/EchartsLeft';
import EchartsRight from '../../Echarts/EchartsRight'
// 大盒子tab切换
// 1、定义大盒子tab切换数据
const tabs = ['作品数据', '分发数据'];
// 内盒子tab切换
const tabs2 = ['我发起的', '我参与的'];
const Index: React.FC = () => {
  // 大盒子tab切换 事件
  // 2、定义大盒子tab切换事件
  const [activeTab, setActiveTab] = useState(0);
  // 3、鼠标移入事件 拿到他的索引进行切换 
  const handleMouseEnter = (index: number) => {
    setActiveTab(index);
  };
  // // 内盒子tab切换 事件
  const [activeTab2, setActiveTab2] = useState(0);
  const handleMouseEnter2 = (index: number) => {
    setActiveTab2(index);
  }
  return (
    <div className='MydesignCenSJBox'>
      <div className="MydesignCenSJTop">
        <p>我的数据</p>
        {/* 4、大盒子tab切换头部渲染 */}
        <div className="MydesignCenSJTab">
          {tabs.map((tab, index) => (
            <div
              key={index}
              className={`tabList ${activeTab === index ? 'active' : ''}`}
              onMouseEnter={() => handleMouseEnter(index)}
            >
              {tab}
            </div>
          ))}
        </div>
        <div className="MydesignCenSJmore">
          查看更多{'>'}
        </div>

      </div>
      <div className="MydesignCenSJBott">
        {/* 大盒子左侧内容 */}
        {activeTab === 0 && <div className='SJTab1'>
          <div className="SJTab1Left">
            <div className="SJTab1Title">
              <p>活跃周报<span>9.16-9.22</span></p>
              <button className='SJTab1Btn'>去制作</button>
            </div>
            <div className="SJTabEXSLeft">
              <div className="SJTabEXSLeft1">
                <div className="EXSBox1">
                  <div>0</div>
                  <h5>下载作品</h5>
                  <p>周对比0</p>
                </div>
                <div className="EXSBox1">
                  <div>5</div>
                  <h5>创建作品</h5>
                  <p>周对比+5</p>
                </div>
                <div className="EXSBox1">
                  <div>5</div>
                  <h5>积分获取</h5>
                  <p>周对比+5</p>
                </div>
              </div>
              {/* Echarts图表 */}
              <div className="SJTabEXSLeft2">
                <EchartsLeft></EchartsLeft>
              </div>
            </div>
          </div>
          <div className="SJTab1Right">
            <EchartsRight></EchartsRight>
          </div>
        </div>}
        {/* 大盒子左侧tab切换 */}
        {activeTab === 1 && <div className='SJTab2'>
          <div className="SJTab2Top">
            {tabs2.map((tab, index) => (
              <div
                key={index}
                className={`tabList2 ${activeTab2 === index ? 'active' : ''}`}
                onClick={() => handleMouseEnter2(index)}
              >
                {tab}
              </div>
            ))}
          </div>
          {/* 左侧tab切换内容部分 */}
          <div className="SJTab2Bottom">
            {activeTab2 === 0 && <div className='SJTab3'>
              <div className="SJTab3Left">
                <img src="	https://www.eqxiu.com/workbench/img/empty.143a1468.png" alt="" />
                <p>当前暂无团队 快去创建吧</p>
                <button>创建团队</button>
              </div>

            </div>}
            {activeTab2 === 1 && <div className='SJTab4'>
              <div className="SJTab3Right">
                <img src="	https://www.eqxiu.com/workbench/img/empty.143a1468.png" alt="" />
                <p>还没有参与作品分发</p>
              </div>
            </div>}
          </div>
        </div>}
      </div>
    </div>
  )
}

export default Index